<template>
  <section class="page client-manage">
    <data-form :model="clientModel" @onSearch="refreshData" :page="pageService">
      <template slot="inputs">
        <el-form-item label="委托方名称" prop="principalName">
          <el-input v-model="clientModel.principalName"></el-input>
        </el-form-item>
        <el-form-item label="委托方编码" prop="principalCode">
          <el-input v-model="clientModel.principalCode"></el-input>
        </el-form-item>
        <el-form-item label="机构类型" prop="outSourceType">
          <el-select
            v-model="clientModel.outSourceType"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="{ index, name, code } in $dict.getDictData(
                'OutSourceType'
              )"
              :key="index"
              :label="name"
              :value="code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="commonState">
          <el-select
            placeholder="请选择"
            v-model="clientModel.commonState"
            clearable
          >
            <el-option
              v-for="{ index, name, code } in $dict.getDictData('CommonState')"
              :key="index"
              :label="name"
              :value="code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属区域" prop="areaIds">
          <el-cascader
            v-model="clientModel.areaIds"
            :options="$city.getCityData()"
            change-on-select
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="联系人" prop="contactName">
          <el-input v-model="clientModel.contactName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="principalPhone">
          <el-input
            v-model="clientModel.principalPhone"
            :maxlength="13"
          ></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box
      :data="clientDataSet"
      @onPageChange="refreshData"
      :page="pageService"
    >
      <template slot="buttons">
        <el-button
          @click="
            clientObj = {};
            dialog.modify = true;
          "
          v-auth="105"
          >新增委托方</el-button
        >
      </template>
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getOperateWidth(1)">
          <template slot-scope="scope">
            <el-button
              @click="(dialog.modify = true), (clientObj = scope.row)"
              type="text"
              size="small"
              v-auth="263"
              >修改</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="委托方名称"
          :min-width="$helper.getColumnWidth(5)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="principalCode"
          label="委托方编码"
          :min-width="$helper.getColumnWidth(5)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="outSourceType"
          label="机构类型"
          :formatter="
            row => $filter.dictConvert(row.outSourceType, 'OutSourceType')
          "
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="commonState"
          label="状态"
          :formatter="
            row => $filter.dictConvert(row.commonState, 'CommonState')
          "
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          label="所属区域"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ $city.getInheritNames(Number(scope.row.areaId)) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="详细地址"
          :min-width="$helper.getColumnWidth(6)"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="联系人"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
      </template>
    </data-box>

    <!--新增/修改委托方-->
    <el-dialog
      :title="clientObj.id ? '修改委托方' : '新增委托方'"
      :center="true"
      :visible.sync="dialog.modify"
      width="700px"
      @open="$nextTick(() => $refs['modify-client'].update(clientObj))"
      @close="$refs['modify-client'].reset()"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <modify-client
        ref="modify-client"
        @close="dialog.modify = false"
        @refreshList="refreshData"
      ></modify-client>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { State, Getter, Action } from "vuex-class";
import { PageService } from "~/utils/page.service";
import { PrincipalService } from "~/services/domain-service/principal.service";
import ModifyClient from "~/components/case-import/client-manage/modify-client.vue";

@Auth(104)
@Layout("workspace")
@Component({
  components: {
    ModifyClient
  }
})
export default class ClientManage extends Vue {
  @State
  public principalList: any;
  @Getter
  public isSupperAdmin: boolean;
  @Action
  public getPrincipalList;
  @Action
  private getCompanyList;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(PrincipalService)
  private principalService: PrincipalService;

  private clientModel: any = {
    principalName: "",
    principalPhone: "",
    principalCode: "",
    outSourceType: "",
    commonState: "",
    collectArea: "",
    areaId: "",
    areaIds: [],
    contactName: ""
  };
  private clientDataSet: any[] = [];
  private dialog: any = {
    modify: false
  };
  private clientObj: any = {};

  /**
   * 查询委托方
   */
  public refreshData() {
    this.clientModel.areaId =
      this.clientModel.areaIds && this.clientModel.areaIds.length > 0
        ? this.clientModel.areaIds[this.clientModel.areaIds.length - 1]
        : "";
    this.principalService
      .getPrincipalList(this.clientModel, this.pageService)
      .subscribe(
        data => {
          this.clientDataSet = data;
        },
        ({ msg }) => {}
      );
  }

  private mounted() {
    // this.refreshData();
    this.getCompanyList();
  }
}
</script>

<style lang="less"></style>
